<!-- 播放监控 -->
<template>
    <list
        ref="list"
        table-ref="playlist"
        class="center"
        style="width: 100%" 
        height="calc(48vh)"
        :list-data="tableData"
        :has-select="false"
        :list-cols="colData"
        :init-cols-props.sync="initColsProps"
        :action-opts="actionOpts"
        @sort="handleSort"
    >
        <template slot="publishTypeSlot" slot-scope="{row}">
            {{ row.publishType | publishTypeFilter(te) }}
        </template>
        <template slot="actionSlot" slot-scope="{row}">
            <el-button
                class="detail-button"
                type="primary"
                size="mini"
                @click.native="handleDetailClick(row)"
                >{{ $t('查看') }}</el-button>
        </template>
    </list>
</template>
<script>
import ScreenApi from '@/api/screen'
import List from '@/components/List'
export default {
    name: 'PlayMonitorInfo',
    components:{
        List
    },
    data() {
        const headerContextMenus = {
            width: '120px',
            items: [
                'sortUp',
                'sortDown',
                'line',
                'cols'
            ]
        }
        return {
            tableData: [],
            colData: [
                { label: '播放时间', prop: 'playTime',headerContextMenus},
                { label: '发布名称', prop: 'programScheduleName',headerContextMenus },
                { label: '播放节目', prop: 'programName',headerContextMenus },
                { label: '播放类型', prop: 'publishType',headerContextMenus,slot: true},
            ],
            initColsProps: ['playTime', 'programName', 'programScheduleName', 'publishType'],
            actionOpts: {
                show: true,
                align: 'center',
                width: '120px',
                hidEditBtn: true,
                hidDelBtn: true,
                name:'查看',
                slot: true
            },
            tableName:'screenPlayMonitorTable',
            initHeadmuneFlag: false
        }
    },
    props: {
      screenId: {
        default: 0
      },
      terminalId: {
        default: 0
      }
    },
    filters: {
      publishTypeFilter(val,te) {
        let msg = ''
        switch(val){
          case 1:
            msg = te('常规发布')
            break
          case 2:
            msg = te('紧急发布')
            break
        }
        return msg
      },
    },
    mounted() {
      this.doPlayMonitorList()
    },
    created() {
    this.$eventBus.$on('doPlayScreenMonitorInfoRefresh', this.doPlayMonitorList)
    },
    beforeDestroy() {
    this.$eventBus.$off('doPlayScreenMonitorInfoRefresh')
    },

    methods:{
        async doPlayMonitorList() {
            console.log(this.terminalId , this.screenId)
            if(this.terminalId === 0 || this.screenId === 0) {
                return
            }
            const res = await ScreenApi.screenMonitorByPlay({terminalId: this.terminalId, screenId: this.screenId})
            if(res) {
                this.tableData = res
            }
        },
        // 排序
        handleSort(sortInfo) {
            if(sortInfo.type == 'ASC'){
                this.$refs.list.$refs.playlist.sort(sortInfo.prop,'ascending');
            }else{
                this.$refs.list.$refs.playlist.sort(sortInfo.prop,'descending');
            }
        },

        handleDetailClick(row){
            this.$store.dispatch('media/getScheduleXml', { programId: row.programId }).then((res) => {
                if(res) {
                    this.$router.push({name: "play-detail", params: {xmlStr: res}})
                }
            })
        },

        te(arg) {
            const hasKey = this.$te(arg)
            if (hasKey) {
            const result = this.$t(arg)
            return result
            }
            return arg
        },
    },
    watch: {
      id(val) {
        this.id = val
        this.doPlayMonitorList()
      }
    }
}
</script>